<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/4/14
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>角色管理</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>


<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="90">
                    <form-item label="名称:">
                        <i-input type="text" v-model="roleVo.roleName"/>
                    </form-item>
                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchRoleList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="roleVo={};searchRoleList();pageNo=1"></i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <shiro:hasPermission name="role:add">
        <i-button type="success" @click="toAdd"icon="md-add">添加角色</i-button>
        </shiro:hasPermission>
<shiro:hasPermission name="role:grant">
        <i-button type="primary" @click="toGrant">角色授权</i-button>
</shiro:hasPermission>
    <!--    <i-button type="warning" >报表</i-button>-->
    </card>
    <i-table :columns="myColumns" :data="pageResult.rows" :height="300" border stripe @on-selection-change="tableSelection=arguments[0]">
        <template slot-scope="{row,index}"  slot="action">
<shiro:hasPermission name="role:update">
            <i-button type="warning" @click="toUpdate(row)">修 改</i-button>
</shiro:hasPermission>
<shiro:hasPermission name="role:del">
            <i-button type="error" @click="del(row,index)">删 除</i-button>
</shiro:hasPermission>
    </template>
    </i-table>
     <modal v-model="addFlag" title="添加角色" >
         <i-form ref="role" :model="role" :label-width="80" style="padding: 30px" :rules="ruleValidate" >
             <form-item label="角色代号"prop="roleCode" >
                 <i-input v-model="role.roleCode" size="large"/>
             </form-item>
            <form-item label="角色名称"prop="roleName" >
             <i-input v-model="role.roleName" size="large"/>
             </form-item>
             <i-button style="margin-left:300px ;bottom: 12px;" type="primary" size="large" @click="add('role')">提交</i-button>
             <i-button   type="error" size="large" @click="cancel('role')" >取消</i-button>
         </i-form>
         <div slot="footer" >
         </div>
     </modal>

    <modal v-model="updateFlag" title="修改角色" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="角色代号" prop="roleCode" >
                <i-input v-model="role.roleCode" size="large"/>
            </form-item>
            <form-item label="角色名称" prop="roleName">
                <i-input v-model="role.roleName" size="large"/>
            </form-item>
           <!-- <form-item label="修改时间">
                <%--<date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.modifyDate" size="large"/>--%>
               <%-- <date-picker type="datetime" format="yyyy-MM-dd HH:mm" :value="role.modifyDate" size="large"/>--%>
                    <date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.modifyDate" size="large"/>
                <%--<i-input  v-model="role.modifyDate" size="large"/>--%>
            </form-item>-->
        </i-form>
    </modal>
<modal v-model="grantFlag" title="角色授权" @on-ok="grant">
    <tree ref="tree" :data="treeData" show-checkbox multiple style="margin-left:80px "></tree>
</modal>

    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchRoleList();"
    <%-- @on-change="searchUserList"--%>
          show-sizer
          :page-size-opts="[5,10,15]"
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];searchRoleList();"
    />
</div>
<script>
        new Vue({
          el:"#root",
              data:{
                  myColumns:[
                      {type:"selection",width:60,align:"center",align:"center"},
                      {title:"角色名称",key: "roleName",align:"center"},
                      {title:"角色代号",key: "roleCode",align:"center"},
                      {title:"创建时间",key: "creationDate",align:"center"},
                      {title:"修改时间",key:"modifyDate",align:"center"},
                      {title:"操作",slot:"action",align:"center"}

                  ],
                  myData:[],
                  pageResult:{
                      rows:[],
                      total:50,
                  },
              addFlag:false,
              updateFlag:false,
              role:{},
                  roleVo:{},
                  pageNo:1,
                  pageSize:5,
              grantFlag:false,
              treeData:[],
              tableSelection:[],
                  ruleValidate: {
                      roleName: [
                          {required: true, message: '请输入角色名称', trigger: 'blur'}
                      ],
                      roleCode: [
                          {required: true, message: '请输入角色代号', trigger: 'blur'}]
                  },


        },
        mounted(){
           this.searchRoleList();
        },
           methods:{
               searchRoleList(){
                   axios.get(`${ctx}/sys/role/search/${this.pageNo}/${this.pageSize}`,{params:this.roleVo})
                       .then(({data})=>{
                           this.pageResult=data.result;
                       });
               },
              /*search(){
                  axios.get(`${ctx}/sys/role/list`)
                      .then(({data})=>{
                          this.myData=data.result;
                      });
              },*/
               toAdd(){
                   this.role = {};
                   this.addFlag=true;

               },
               add(name){
                   this.$refs[name].validate((valid) => {
                       if (valid) {
                   axios.post(`${ctx}/sys/role/add`,this.role)
                       .then(({data})=>{
                           this.addFlag=false;//关闭模态框
                             iview.Message.success({content:data.msg});
                             this.searchRoleList();
                       });
                       }else {
                           this.$Message.error('添加失败!');
                       }
                   })
               },
               cancel(name){
                   this.$refs[name].resetFields();
                   this.addFlag=false;
               },
               del(row,index){
                  //console.log(row);
                   //console.log(index);
                   let _this=this;
                let flag= iview.Modal.confirm({
                       title:"您确实要删除么？",
                       content:"该操作不可逆，请谨慎操作。",
                       onOk(){
                           axios.get(`${ctx}/sys/role/del?id=${row.id}`)
                               .then(({data})=>{
                                   iview.Message.success({content:data.msg});
                                   //_this.search();
                                   _this.pageResult.rows.splice(index,1);
                               });
                       }
                   });
               },
               toUpdate(row){
                  //this.role=row;
                   Object.assign(this.role,row);
                  this.updateFlag=true;
               },
               update(){
                   if(this.role.roleCode==""){
                       return   this.$Message.error('角色代号不能为空!');
                   }
                   if(this.role.roleName==""){
                       return  this.$Message.error('角色名称不能为空!');
                   }
                  /* if(this.role.modifyDate<this.role.creationDate) {
                       return this.$Message.error('修改时间必须大于创建时间!');
                   }*/
                  let params=Qs.stringify(this.role,{serializeDate:(date)=> {
                        return  moment(date).format("YYYY-MM-DD HH:mm");
                      }});

                  /* axios.post(`${ctx}/sys/role/update`,params)*/
                   axios.post(`${ctx}/sys/role/update`,Qs.parse(params))
                       .then(({data})=>{
                           this.updateFlag=false;//关闭模态框
                           iview.Message.success({content:data.msg});
                           this.searchRoleList();
                       });
                   /*axios.post(`${ctx}/sys/role/update`,Qs.stringify(this.role))
                       .then(({data})=>{
                           this.updateFlag=false;//关闭模态框
                           iview.Message.success({content:data.msg});
                       });*/
               },
               toGrant(){
                 if(this.tableSelection.length!=1) {
                     iview.Modal.error({
                        title:"信息提示",
                        content:"请选择一项只能选择一项待授权"
                     });
                     return;
                 }
               /*  axios.get(`${ctx}/sys/role/search4Tree/${this.tableSelection[0].id}`)*/
               /*axios.get(`${ctx}/sys/role/search4Tree`,{params:{id:${this.tableSelection[0].id}}})*/
               axios.get(`${ctx}/sys/role/search4Tree?id=${this.tableSelection[0].id}`)
               .then(({data})=>{
                   this.treeData=data.result;
                   this.grantFlag=true;
               });

        },
               grant(){
                  var params=`roleId=${this.tableSelection[0].id}`;
               let arr=this.$refs.tree.getCheckedAndIndeterminateNodes();
              let str= arr.map(node=>"ids="+node.id).join("&");
                   params+="&"+str;
              axios.get(`${ctx}/sys/role/grant?${params}`)
                  .then(({data})=>{
                     this.grantFlag=false;//关闭模态框
                      iview.Message.success({content:data.msg});
                  });

               }
           }
        });
</script>
<%--<script src="role.js"></script>--%>
</body>
</html>
